<template>
  <div class="cart-container">
      <el-card>
          <template #header>
              <div class="card-header">
                  <span>我的购物车</span>
                  <el-button type="text" @click="clearCart" v-if="cartItems.length">
                      清空购物车
                  </el-button>
              </div>
          </template>

          <div v-if="cartItems.length === 0" class="empty-cart">
              <el-empty description="购物车是空的">
                  <el-button type="primary" @click="$router.push('/')">
                      去购物
                  </el-button>
              </el-empty>
          </div>

          <div v-else>
              <div v-for="item in cartItems" :key="item.id" class="cart-item">
                  <div class="item-info">
                      <img :src="item.image || 'https://via.placeholder.com/100'" class="item-image">
                      <div class="item-details">
                          <h3>{{ item.name }}</h3>
                          <div class="price">¥{{ item.price }}</div>
                      </div>
                  </div>
                  <div class="item-actions">
                      <el-input-number 
                          v-model="item.quantity" 
                          :min="1" 
                          size="small"
                          @change="updateCart"
                      />
                      <el-button 
                          type="danger" 
                          size="small"
                          @click="removeFromCart(item)"
                      >
                          删除
                      </el-button>
                  </div>
              </div>

              <div class="cart-footer">
                  <div class="total">
                      总计: <span class="price">¥{{ totalPrice }}</span>
                  </div>
                  <el-button type="primary" @click="checkout">
                      结算
                  </el-button>
              </div>
          </div>
      </el-card>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'CartPage',
  setup() {
      const store = useStore()
      const router = useRouter()
      const cartItems = ref([])

      const totalPrice = computed(() => {
          return cartItems.value.reduce((total, item) => {
              return total + (item.price * item.quantity)
          }, 0).toFixed(2)
      })

      const loadCart = () => {
          const savedCart = localStorage.getItem('cart')
          if (savedCart) {
              cartItems.value = JSON.parse(savedCart)
          }
      }

      const saveCart = () => {
          localStorage.setItem('cart', JSON.stringify(cartItems.value))
      }

      const updateCart = () => {
          saveCart()
      }

      const removeFromCart = (item) => {
          const index = cartItems.value.findIndex(i => i.id === item.id)
          if (index > -1) {
              cartItems.value.splice(index, 1)
              saveCart()
          }
      }

      const clearCart = () => {
          cartItems.value = []
          saveCart()
      }

      const checkout = () => {
          if (!store.getters['user/isLoggedIn']) {
              ElMessage.warning('请先登录')
              router.push('/login')
              return
          }
          ElMessage.success('结算功能开发中...')
      }

      onMounted(() => {
          loadCart()
      })

      return {
          cartItems,
          totalPrice,
          updateCart,
          removeFromCart,
          clearCart,
          checkout
      }
  }
}
</script>

<style scoped>
.cart-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-cart {
  padding: 40px 0;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.item-info {
  display: flex;
  align-items: center;
}

.item-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 20px;
}

.item-details h3 {
  margin: 0 0 10px 0;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.cart-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
</style>